<template>
  <component>
    <div v-if='carTest !== undefined'>
      <div class='second-text'>
        实车检测
      </div>
      <div style='height: 0.1em;background-color: #F1C041;margin-bottom: 0.4em'/>
      <div>
        <table style='border-spacing: 0;width: 100%'>
          <tr>
            <td rowspan='2' style='width: 5.2em ;'>
              <div align='center' style='height: 1.8em;width: 5.3em ;background-color: #265CD2;color: white;font-size: 1.4em;font-weight: bold;'>
                <span style='vertical-align: middle;'>{{carTest.plate}}</span>
              </div>
            </td>
            <th class='dth'>
              表显里程
            </th>
            <th class='dth'>
              排量
            </th>
            <th class='dth'>
              车身颜色
            </th>
          </tr>
          <tr align='center' class='second-text'>
            <td>
              {{ carTest.miliage }}
            </td>
            <td>
              {{carTest.volume}}
            </td>
            <td>
              {{carTest.color}}
            </td>
          </tr>
        </table>
      </div>
      <div style='border: 0.2em solid #F1C041;margin-top: 0.4em;height: 5em'>
        <div style='float: left;width: 4.3em;height: 4.3em;background-color: #FCF3D0;margin: 0.1em;border: solid 0.2em #F0C041;text-align: center;vertical-align: middle;padding-top: 0.4em'>
          <div>
            车型
          </div>
          <div>
            核实
          </div>
        </div>
        <div style='float: right;width: 72vw;text-align: center'>
          <div style='font-size: 0.6em'>与第三方车型库参数对比后，判定此车大概率为</div>
          <div style='font-size: 1.2em;font-weight: bold'>{{inType}}</div>
          <div>{{inYear}}</div>
        </div>
      </div>
    </div>
  </component>
</template>

<script setup lang='ts'>
import { defineProps, PropType, ref } from 'vue';
export interface CarTestType {
  plate: string,
  miliage: string,
  volume: string,
  color: string
  carTrueType: string
}

const props = defineProps({
  carTest: {
    type: Object as PropType<CarTestType>
  }
}),
      carTrueType = props.carTest.carTrueType,
      indexOf = carTrueType.indexOf(" "),
      type = carTrueType.substr(0,indexOf),
      year = carTrueType.substr(indexOf),
      inType = ref(type),
      inYear = ref(year)



</script>

<style scoped lang='sass'>
.second-text
  font-size: 1.2em
.dth
  font-size: 0.6em
  color: #F0C041
  text-shadow: -1px -1px 0 #4f4d57,1px -1px 0 #4f4d57,-1px 1px 0 #4f4d57,1px 1px 0 #4f4d57,0px 2px 2px rgba(0,0,0,0.6)
</style>
